<!DOCTYPE html>
<style>
#testBox {
    background: blue;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    position: absolute;
}
</style>
<div id="testBox">
</div>
<p id="description">
</p>
<script src="../../resources/js-test.js"></script>
<script>
    window.jsTestIsAsync = true;

    description('Test that a mouse leave event is triggered when the OS tells us the mouse has left without changing position.');
    var hasMouseLeave = false;
    var hasMouseOut = false;
    var box = document.getElementById('testBox');
    var lastMouseX = 0;
    var lastMouseY = 0;
    box.addEventListener('mouseleave', function (e) {
        hasMouseLeave = true;
        lastMouseX = e.clientX;
        lastMouseY = e.clientY;
    });
    box.addEventListener('mouseout', function () {
        hasMouseOut = true;
    });
    if (window.testRunner) {
        eventSender.mouseMoveTo(1, 1);
        eventSender.mouseMoveTo(box.offsetLeft + 10, box.offsetTop + 10);
        eventSender.mouseLeave();
        shouldBeTrue('hasMouseLeave');
        shouldBeTrue('hasMouseOut');
        shouldBe('box.offsetLeft + 10', 'lastMouseX');
        shouldBe('box.offsetTop + 10', 'lastMouseY');
        finishJSTest();
    }
</script>